<template>
  <div>
    <div class="table-operator mb20">
      <el-button type="primary" @click="$refs.shiftForm.add()">{{$t('sys.new_template')}}</el-button>
    </div>

    <div class="config-wrapper mr20" v-for="item in configList" :key="item.id">
      <div class="table-operator--inner">
        <div class="left">
          <el-checkbox
            :checked="item.enable"
            @change="
              val => {
                onDefaultChange(val, item.id);
              }
            "
          />
          <span class="name" style="font-size: 16px;">{{ item.name }}</span>
        </div>
        <div class="right mr5">
          <el-button
            style="margin-right: 10px;"
            size="medium"
            icon="el-icon-edit"
            type="text"
            @click="$refs.shiftForm.edit(item)">
          </el-button>
          <el-button
            size="medium"
            class="link-danger"
            icon="el-icon-delete"
            type="text"
            @click="onDelete(item.id)"
          ></el-button>
        </div>
      </div>
      <el-table
        ref="table"
        current-row-key="id"
        stripe
        border
        :data="mockTableData">
        <template v-for="(header, index) in header">
          <el-table-column :key="index" :label="header">
            {{ item.templates[index].shiftsName || $t('sys.rest') }}
          </el-table-column>
        </template>
      </el-table>
    </div>

    <shift-temp-form ref="shiftForm" @ok="handleSubmit"/>
  </div>
</template>

<script>
import i18n from "../../../../i18n"
import ShiftTempForm from './ShiftTempForm'
import { putHmusershiftsconfigChange,getHmusershiftsconfigList,deleteHmusershiftsconfig } from '@/apis/paas/HmUserShiftsConfigController.js'

export default {
  name: 'ShiftTempSetting',
  components: {
    ShiftTempForm
  },
  data () {
    return {
      loading: false,
      mockTableData: [{}],
      configList: [],
      header: [i18n.t('sys.Monday'), i18n.t('sys.Tuesday'), i18n.t('sys.Wednesday'), i18n.t('sys.Thursday'), i18n.t('sys.Friday'), i18n.t('sys.Saturday'), i18n.t('sys.Sunday')]
    }
  },
  computed: {},
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.loading = true
      getHmusershiftsconfigList()
        .then(res => {
          this.configList = []
          const configList = res.map(ele => {
            ele.data = this.parseTableData(ele.templates)
            return ele
          })
          this.$nextTick(() => {
            this.$set(this, 'configList', configList)
          })
        })
        .finally(() => {
          this.loading = false
        })
    },

    parseTableData (data) {
      const item = {}
      for (const ele of data) {
        item[ele.type] = {
          id: ele.id,
          shiftsId: ele.shiftsId,
          shiftsName: ele.shiftsName
        }
      }
      item.id = 1
      return [item]
    },

    onDefaultChange (val, id) {
      putHmusershiftsconfigChange({ id, enable: val })
        .then(res => {
          this.$message.success(this.$t('sys.operation_success'))
          this.init()
        })
        .finally(() => {
        })
    },
    onDelete (id) {
      this.$confirm(this.$t(`sys.confirm_to_delete_working_time_configuration`), this.$t('sys.tips'), {
        type: 'warning',
        center: true
      }).then(() => {
        deleteHmusershiftsconfig([id]).then(res => {
          this.$message.success(this.$t('sys.operation_success'))
          this.init()
        })
      })
    },

    handleSubmit () {
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
.config-wrapper {
  margin-bottom: 16px;

  .table-operator--inner {
    padding: 8px 0;
    display: flex;
    justify-content: space-between;

    .name {
      margin: 0 0 0 8px;
    }
  }
}
</style>
